<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>lesson3_表单</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6 layui-col-md-offset3" >
					<form class="layui-form" action="">
					  <div class="layui-form-item">
					    <label class="layui-form-label">输入框</label>
					    <div class="layui-input-block">
					      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">密码框</label>
					    <div class="layui-input-inline">
					      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					    </div>
					    <div class="layui-form-mid layui-word-aux">辅助文字</div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">选择框</label>
					    <div class="layui-input-block">
					      <select name="city" lay-verify="required">
					        <option value=""></option>
					        <option value="0">北京</option>
					        <option value="1">上海</option>
					        <option value="2">广州</option>
					        <option value="3">深圳</option>
					        <option value="4">杭州</option>
					      </select>
					    </div>
						
						<div class="layui-input-block">
						  <select name="city" lay-verify="required">
						    <option value=""></option>
						    <optgroup label="北京">
								 <option value="1">东城区</option>
								 <option value="2">大学区</option>
							</optgroup>
							<optgroup label="其它">
								 <option value="1">上海</option>
								 <option value="2">广州</option>
								 <option value="3">深圳</option>
								 <option value="4">杭州</option>
							</optgroup>
						  </select>
						</div>
						
						<div class="layui-input-block" >
						  <select name="city" lay-verify="required" lay-search>
						    <option value=""></option>
						    <optgroup label="北京">
								 <option value="1">东城区</option>
								 <option value="2">大学区</option>
							</optgroup>
							<optgroup label="其它">
								 <option value="1">上海</option>
								 <option value="2">广州</option>
								 <option value="3">深圳</option>
								 <option value="4">杭州</option>
							</optgroup>
						  </select>
						</div>
						
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">复选框</label>
					    <div class="layui-input-block">
					      <input type="checkbox" name="like[write]" title="写作">
					      <input type="checkbox" name="like[read]" title="阅读" checked>
					      <input type="checkbox" name="like[dai]" title="发呆">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">开关</label>
					    <div class="layui-input-block">
					      <input type="checkbox" name="switch" lay-skin="switch">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">单选框</label>
					    <div class="layui-input-block">
					      <input type="radio" name="sex" value="男" title="男">
					      <input type="radio" name="sex" value="女" title="女" checked>
					    </div>
					  </div>
					  <div class="layui-form-item layui-form-text">
					    <label class="layui-form-label">文本域</label>
					    <div class="layui-input-block">
					      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <div class="layui-input-block">
					      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					    </div>
					  </div>
					</form>
				</div>
				
			</div>
		</div>
		<!-- 引入 js -->
		<script src="./layui/layui.js"></script>
		<!-- 引入表单模块 -->
		<script>
			layui.use(['form'],function(){
				
			});
		</script>
	</body>
</html>